<template>
  <div id="type-page">
    <div>
      <!-- <h3>玩法种类</h3> -->
      <div class="play-type">
        <button
          v-for="item in typeList"
          :key="item"
          :class="type === item ? 'action-red' : ''"
          @click="typeHandle(item)"
        >
          选 {{ item }}
        </button>
      </div>
    </div>
    <div class="name-card">
      <div name="roll-animation">
        <div v-if="isRolling">
          <h3 style="margin: 18px 0 18px 0">🎉 命运转动</h3>
          <div class="name-loading"></div>
        </div>
        <div v-if="currentStudent && !isRolling">
          <h3 style="margin: 18px 0 18px 0">🎉 财富密码</h3>
          <h2 style="color: #e74c3c; margin: 18px 0 18px 0">
            {{ currentStudent }}
          </h2>
        </div>
      </div>
    </div>

    <div class="controls">
      <button class="action-blue" @click="roll" :disabled="isRolling">
        {{ isRolling ? '命运转动' : '财富齿轮' }}
        <!-- <span v-if="isRolling" class="loading"></span> -->
      </button>
      <button class="action-red" @click="reset">重头再来</button>
      <button @click.self="showHistory">历史记录</button>
    </div>

    <!-- 数据列表 -->
    <!-- Grid容器 -->
    <div class="grid-container">
      <!-- 遍历10个元素生成列 -->
      <div
        v-for="item in num"
        :key="item"
        :class="['grid-item', { selected: selectedList?.includes(item) }]"
      >
        {{ item }}
      </div>
    </div>
  </div>

  <History :visible="historyVisible" @close="closeDialog" :list="h8HistoryList" :textColor="1" />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import History from '../components/History.vue'
import { callBack } from '@/utils'
import axios from 'axios'
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()

const num = ref([
  '1',
  '2',
  '3',
  '4',
  '5',
  '6',
  '7',
  '8',
  '9',
  '10',
  '11',
  '12',
  '13',
  '14',
  '15',
  '16',
  '17',
  '18',
  '19',
  '20',
  '21',
  '22',
  '23',
  '24',
  '25',
  '26',
  '27',
  '28',
  '29',
  '30',
  '31',
  '32',
  '33',
  '34',
  '35',
  '36',
  '37',
  '38',
  '39',
  '40',
  '41',
  '42',
  '43',
  '44',
  '45',
  '46',
  '47',
  '48',
  '49',
  '50',
  '51',
  '52',
  '53',
  '54',
  '55',
  '56',
  '57',
  '58',
  '59',
  '60',
  '61',
  '62',
  '63',
  '64',
  '65',
  '66',
  '67',
  '68',
  '69',
  '70',
  '71',
  '72',
  '73',
  '74',
  '75',
  '76',
  '77',
  '78',
  '79',
  '80',
])
const typeList = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
const currentStudent = ref(null)
const type = ref(10)
const selectedList = ref([])
const isRolling = ref(false)
const h8HistoryList = ref(JSON.parse(localStorage.getItem('h8HistoryList')) || [])
const historyVisible = ref(false)

const luckyNum = ref([])
const winData = ref({})

onMounted(() => {
  luckyNum.value = num.value
  getLuckNumber()
})
function getLuckNumber() {
  axios
    .get(
      '/api/cwl_admin/front/cwlkj/search/kjxx/findDrawNotice?name=kl8&issueCount=&issueStart=&issueEnd=&dayStart=&dayEnd=&pageNo=1&pageSize=1&week=&systemType=PC',
    )
    .then(({ data }) => {
      if (data.state === 0) {
        winData.value = data.result[0]

        // proxy.$dialog.show({
        //   title: '上期开奖结果',
        //   content: `<div style="color: red; font-size: 18px;">
        //     ${winData?.value?.red?.split(',')?.join(' ')}</div>`,
        // })
      }
    })
    .catch((error) => {
      console.log('error', error)
    })
}

function roll() {
  isRolling.value = true
  currentStudent.value = null

  setTimeout(() => {
    let array = callBack(type.value, luckyNum.value)

    currentStudent.value = array?.join(' ') || ''
    selectedList.value = array
    h8HistoryList.value.push(currentStudent.value)
    // 更新localStorage中的历史记录
    localStorage.setItem('h8HistoryList', JSON.stringify(h8HistoryList.value))
    luckyNum.value = luckyNum.value.filter((item) => {
      return !array?.includes(item)
    })
    isRolling.value = false
  }, 800)
}
function reset() {
  selectedList.value = []
  currentStudent.value = null
  isRolling.value = false
  // 清空历史记录
  h8HistoryList.value = []
  // 更新localStorage中的历史记录为空
  localStorage.setItem('h8HistoryList', JSON.stringify([]))
  luckyNum.value = num.value
}
function typeHandle(value) {
  type.value = value
}
function showHistory() {
  historyVisible.value = true
}
function closeDialog() {
  historyVisible.value = false
}
</script>

<style scoped>
@import url(../assets/index.css);
</style>
